<style lang="less">
@import "./login.less";
</style>

<template>
    <div class="login login-modal">
        <div class="modal-body">
            <section id="index-first-page" class="index-page-block">
                <div id="index-first-banner" class="comFranmes"></div>
                <div class="index_animation_fast">
                    <img src="https://www.chuangkit.com/distweb/img/index_animation_fast.ece4e76d.png">
                </div>
                <div class="index_animation_slow">
                    <img src="https://www.chuangkit.com/distweb/img/index_animation_slow.04cecdfb.png">
                </div>
            </section>
            <div class="login-box login-container">
                <div class="left-bg">
                    <img src="../../assets/images/login-left-bg.png" alt="功能特征">
                    <div class="title">卓越的项目需要伟大的团队完成</div>
                </div>
                <div class="form-container">
                    <header>
                        <img class="logo" src="//sta.36krcnd.com/36krx2018-front/static/logo.57193dc5.png" alt="">
                    </header>
                    <div class="slogen">广告违禁词业务平台</div>
                    <login-form @on-success-valid="handleSubmit" :processing="processing" :loading="loading"></login-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import store from "@/store"
import { debuglog } from 'util'
import { mapActions } from 'vuex'
import LoginForm from '_c/login-form'
import axios from "@/libs/api.request"
import { initRouter } from "@/libs/router-util"

export default {
    components: {
        LoginForm
    },
    data() {
        return {
            processing: false,
            loading: false
        }
    },
    methods: {
        ...mapActions([
            'handleLogin'
        ]),

        /**
         * 登录
         */
        handleSubmit({ phone, captcha }) {
            let that = this;
            that.loading = true;

            that.handleLogin({ phone, captcha })
                .then(res => {
                    if (res.data.code == 200) {
                        this.processing = true;
                        this.$Message.loading({
                            duration: 0,
                            closable: false,
                            content: "用户信息验证成功,正在登录系统..."
                        });

                        setTimeout(() => {
                            initRouter(that);
                            this.$router.push({
                                name: "home"
                            });

                            setTimeout(() => {
                                this.$Message.destroy();
                            }, 1000);
                        }, 1500);
                    } else {
                        this.processing = false;
                        this.loading = false;
                        this.$Message.error(res.data.message);
                    }
                })
                .catch(err => {
                    that.loading = false;
                    if (!err.status) {
                        this.$Message.error({
                            content: "网络出错,请检查你的网络或者服务是否可用",
                            duration: 5
                        });
                    }
                })
        }
    }
}
</script>
